<template>
    <div class="mainBox">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="个人动态" name="first">
                <div>
                    <el-timeline style="max-width: 400px">
                        <el-timeline-item v-for="(item, index) in dynamicList" :key="item.id"
                            :timestamp="item.createTime" placement="top">
                            <div style="display: flex;">
                                <span style="margin-right: 10px;">
                                    {{ item.username + " " }}
                                </span>
                                <span style="font-weight: 1000;  margin-right: 10px;">
                                    {{ item.type }}
                                </span>
                                <span>
                                    {{ item.operate }}
                                </span>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
//tabs
const activeName = ref('first')
//动态列表
const dynamicList = ref([])
const oldImg = ref(null);
const newImg = ref(null);

async function getDynamic() {

    const res = await axios.get('/api/dynamic/dynamic_select_id?id=' + localStorage.getItem('id'))
    if (res.data.code == 200) {
        dynamicList.value = res.data.data
    } else {
        ElMessage.error("系统出错")
    }
}
onMounted(() => {
    getDynamic()
})
</script>

<style lang="scss" scoped>
.mainBox {
    border-radius: 10px;
    padding: 15px;
    height: 100%;
    width: 100%;
    background-color: #fff;
}
</style>